<?php
$active_page = "goal.php";
?>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/semantic.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/semantic.js"></script>
<script type="text/javascript">
$(function(){
  var stepEl = $('.vertical.ordered.steps');
  var oldTop = stepEl.offset().top;
/*--------------
     Step-1
---------------*/  
  $('.step-1').click(function(){
    var This = $(this);
    var chooseOption = This.data("option");
    
    if($('.step-1.green').length){//If change step 1 button
      if(!This.hasClass('green')){//Do nothing if click same button twice
        $('.step-1').removeClass('green');
        This.addClass('green');

      }
    }else{//if first time chosing step 1
      This.addClass('green');

      
      var newTop = $('#step-2').offset().top - oldTop;

      $('#step-2').removeClass('hidden');
     
      stepEl.animate({'top':newTop},150,'linear');
      stepEl.find('.active').removeClass('active').addClass('completed').next().removeClass('disabled').addClass('active');
    }
  });

/*--------------
     Step-2
---------------*/
  $('#startFat')
  .keyup(function(){
    $(this).removeClass('success');
    $('#bf_popup img').removeClass('active');
  })
  .focus(function(){
    $(this).select();
  });

  /*Popup*/
  $('#bf_popup_show').popup({
    on:'manual',
    hideOnScroll:false,
    position:'top center'
  });
  
  //Show popup
  $('#bf_popup_show').on('click', function(){
    $(this).popup('toggle');
  });

  //Hide popup
  $('#bf_close').click(function(){
    $('#bf_popup_show').popup('hide');
  });
  $('#bf_popup img').click(function(){
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    $("#startFat").val($(this).data("value")).addClass('success');
    $('#bf_popup_show').popup('hide');
  });

  $('#step-2-next').click(function(){
    $(this).hide();
    $('#step-3').removeClass('hidden');
    
    var newTop = $('#step-3').offset().top - oldTop;
   
    stepEl.animate({'top':newTop},150,'linear');
    stepEl.find('.active').removeClass('active').addClass('completed').next().removeClass('disabled').addClass('active'); 
  });  

/*--------------
     Step-3
---------------*/ 

});
</script>
<style type="text/css">
/*--------------
     Container
---------------*/
.container{
	width:71.43rem;
	margin:auto;
	padding:0 0.714rem;
}

/*--------------
     steps
---------------*/
.vertical.ordered.steps{
  position: relative;
}

/*--------------
     Segment
---------------*/
#step-1,#step-2,#step-3{
  padding:1rem;
}
.hidden{
  opacity: 0;
}

/*--------------
     Form
---------------*/
input.success{
  background-color: #eeffe7!important;
}
input.step-2{
  width:50%;
  border: none!important;
  text-align:center!important;
}

/*--------------
     Popup
---------------*/
#bf_popup_show{
  cursor: pointer;
}
#bf_popup img{
  height:200px;
  cursor:pointer;
  border:1px solid #dddddd;
}
#bf_popup img:hover{
  border:1px solid #4184f3;
}
#bf_popup img.active{
  border:1px solid #4184f3;
}
#bf_close{
  position: absolute;
  top:0;
  right:0;
  opacity: 0.6;
  cursor: pointer;
}
#bf_close:hover{
  opacity: 1;
}
</style>
</head>
<body>
<!--************
Top menu
*************-->
<?php
include("top-menu.php");
?>

<!--************
Content
*************-->
<div class="container">
<?php
include("profile-cover.php");
?>

  <div class="ui grid">
    <div class="sixteen wide column">
      <div class="ui secondary pointing menu">
        <a class="item">
          <i class="alarm icon"></i> ที่ดำเนินอยู่
        </a>
        <a class="item">
          <i class="alarm slash outline icon"></i> ที่เสร็จสิ้นแล้ว
        </a>
        <a class="active item">
          <i class="plus icon"></i> สร้างเป้าหมาย
        </a>        
      </div>
    </div>
    <div class="five wide column">
      <div class="ui fluid vertical ordered steps">
        <div class="active step">
          <div class="content">
            <div class="title">เลือกเป้าหมาย</div>
            <div class="description">ลดไขมัน เพิ่มกล้าม และอีกมากมาย</div>
          </div>
        </div>
        <div class="disabled step">
          <div class="content">
            <div class="title">ใส่ข้อมูลปัจจุบัน</div>
            <div class="description">ใส่ข้อมูลเป้าหมายของคุณ</div>
          </div>
        </div>
        <div class="disabled step">
          <div class="content">
            <div class="title">ใส่เป้าหมาย</div>
            <div class="description">ใส่ข้อมูลเป้าหมายของคุณ</div>
          </div>
        </div>        
        <div class="disabled step">
          <div class="content">
            <div class="title">เสร็จสิ้น</div>
            <div class="description">ตรวจสอบเป้าหมาย และเริ่มต้น !</div>
          </div>
        </div>
      </div>      
    </div>
    <div class="eleven wide column">
      <div id="step-1">
        <h3 class="ui header">1. เลือกเป้าหมาย</h3>
        <div class="ui step-1 massive button" data-option="1">น้ำหนัก</div>
        <div class="ui step-1 massive button" data-option="2">สัดส่วน</div>        
      </div>
      <div id="step-2" class="hidden">
        <div class="ui divider"></div>
        <h3 class="ui header">2. ใส่ข้อมูลปัจจุบัน</h3>
        <div class="content">
          <div class="ui three column grid">
            <div class="column">
              <div class="ui segment">
                <h4 class="ui header">ส่วนสูง</h4>
                <div class="ui clearing divider"></div>
                <div class="ui massive input">
                  <input class="step-2" type="text" placeholder="เซ็นติเมตร">                 
                </div>
              </div>
            </div>          
            <div class="column">
              <div class="ui segment">
                <h4 class="ui header">น้ำหนัก</h4>
                <div class="ui clearing divider"></div>
                <div class="ui massive input">
                  <input class="step-2" type="text" placeholder="กิโลกรัม">                 
                </div>
              </div>
            </div>
            <div class="column">
              <div class="ui segment">
                <h4 class="ui left floated header">% ไขมัน</h4>
                <a class="ui right floated green header" id="bf_popup_show" style="font-size:1.071rem;color:#CCC;font-weight:normal;">ฉันไม่รู้</a>
                <div id="bf_popup" class="ui fluid popup">
                  <div class="ui header">เลือกรูปที่ใกล้เคียงคุณ</div>
                  <i id="bf_close" class="large close icon"></i>
                  <div class="ui tiny images">
                    <img data-value="8" src="images/bf_m8.jpg">
                    <img data-value="12" src="images/bf_m12.jpg">
                    <img data-value="15" src="images/bf_m15.jpg">
                    <img data-value="20" src="images/bf_m20.jpg">
                    <img data-value="25" src="images/bf_m25.jpg">
                    <img data-value="30" src="images/bf_m30.jpg">
                    <img data-value="35" src="images/bf_m35.jpg">
                  </div>
                </div>
                <div class="ui clearing divider"></div>                   
                <div class="ui massive input">
                  <input class="step-2" id="startFat" type="text" placeholder="%">
                </div>                
              </div>
            </div>
            <div class="row">
              <div class="column"><button id="step-2-next" class="ui green right labeled icon button"><i class="arrow right icon"></i>ถัดไป</button></div>
            </div>
          </div>         
        </div>
      </div>
      <div id="step-3" class="hidden">
        <div class="ui divider"></div>
        <h3 class="ui header">3. เป้าหมาย</h3>
        <div class="content">
    
        </div>
      </div>           
    </div>
  </div> 
</div>
</body>
</html>